<template>
  <div>
    <h1>新增订单</h1>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="门店" prop="stores">
        <el-select
          v-model="ruleForm.stores"
          placeholder="请选择门店"
          @change="getDis"
        >
          <el-option
            v-for="item in storesrows"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配送人员" prop="distribution">
        <el-select v-model="ruleForm.distribution" placeholder="请选择配送人员">
          <el-option
            v-for="item in distributionrows"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <p>请选择商品</p>
      <el-table
        :data="goodsrows"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="_id" label="编号" width="140"> </el-table-column>
        <el-table-column prop="name" label="商品姓名" width="120">
        </el-table-column>
        <el-table-column prop="price" label="价格" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-form-item label="总价" prop="price">
        <span> ￥{{ ruleForm.price }} </span>
      </el-form-item>
      <el-form-item label="订单状态" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio disabled>完成</el-radio>
          <el-radio :label="false">进行中</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即新增</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("order");
export default {
  mounted() {
    this.getgoods();
    this.getstores();
    this.ruleForm.users = JSON.parse(localStorage["users"])._id;
  },
  data() {
    return {
      ruleForm: {
        users: "",
        stores: "",
        distribution: "",
        resource: false,
        price: 0,
        goodsArr: [],
      },
      rules: {
        stores: [
          { required: true, message: "请选择门店ID", trigger: "change" },
        ],
        distribution: [
          { required: true, message: "请选择配送人员", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const newOrder = this.ruleForm;
          this.sendOrder(newOrder);
          this.$router.push({
            path: `/info/order`,
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getDis(id) {
      this.ruleForm.stores = id;
      this.getDistrbution(id);
    },
    handleSelectionChange(val) {
      this.ruleForm.goodsArr = val;
      const priceArr = this.ruleForm.goodsArr.map((item) => item.price);
      function sum(arr) {
        var s = 0;
        arr.forEach(function (val) {
          s += val;
        }, 0);
        return s;
      }
      this.ruleForm.price = sum(priceArr).toFixed(2);
    },
    ...mapActions(["getgoods", "getstores", "getDistrbution","sendOrder"]),
  },
  computed: {
    ...mapState(["goodsrows", "storesrows", "distributionrows"]),
  },
};
</script>
